<template>
  <div id="home">
    <div class="step-one">
      <div class="all-title">AI智能分析</div>
      <AIComponents />
    </div>
    <div class="step-two">
      <div class="all-tab">
        <div
          v-for="(item, index) in labels"
          :key="index"
          :class="{active: active === index}"
          @click="handleNavItemClick(index)"
        >
          {{ item.bookName }}
        </div>
      </div>
      <div class="all-title">知识图谱</div>
      <div class="step-two-box">
        <HomeChart2 />
      </div>
    </div>
    <div class="step-three">
      <Banjiao />
    </div>
  </div>
</template>
  
  <script>
import HomeChart2 from "@/components/HomeChart2.vue";
import AIComponents from "@/components/AIComponents.vue";
import Banjiao from "@/components/Banjiao.vue";

export default {
  components: {
    HomeChart2,
    AIComponents,
    Banjiao,
  },
  data() {
    return {
      labels: [],
      active: 0,
    };
  },
  created() {
    this.getLabel();
  },
  mounted() {},
  methods: {
    getLabel() {
      const url = "/dify/getBookInfo";
      this.$axios.get(url).then((response) => {
        const res = response;
        if (res.code === 200) {
          console.log(res.data, 2);
          this.labels = res.data;
        }
      });
    },
    handleNavItemClick(index) {
      this.active = index;
      this.$router.push(this.teaNavList[index].url);
    },
    handleLogout() {
      this.$store.commit("logout");
      this.$router.push("/login");
    },
  },
};
</script>
<style lang="scss" scoped>
#home {
  .step-one {
    margin-bottom: 62px;
  }
  .step-two {
    margin-bottom: 47px;
    .step-two-box {
      display: flex;
    }
  }
  .step-three {
  }
}
</style>